import React, { useState, useCallback, memo, useMemo } from 'react';
import { connect } from 'umi';
import { Dropdown, Menu } from 'antd';
import { LogoutOutlined, DownOutlined } from '@ant-design/icons';

const SettingContent = ({ user, dispatch }) => {
  const handleSubmit = useCallback((event) => {
    const { key } = event;
    if (key === 'logout') {
      dispatch({
        type: 'global/logout',
      });
    }
  }, []);

  const menu = (
    <Menu onClick={handleSubmit}>
      <Menu.Item key="logout">
        <LogoutOutlined /> 退出登录
      </Menu.Item>
    </Menu>
  );

  return (
    <>
      <Dropdown overlay={menu} placement="bottomRight">
        <span style={{ cursor: 'pointer', color: '#fff', fontSize: 16 }}>
          {user && user.name} <DownOutlined />
        </span>
      </Dropdown>
    </>
  );
};

export default connect(({ global }) => ({
  user: global.user,
}))(memo(SettingContent));
